<template>
    <el-popover placement="bottom" width="256" trigger="click" v-model="show">
        <div class="input-color" slot="reference">
            <span v-text="name"></span>
            <button>
                <em :style="{ backgroundColor: color }"></em>
                <!-- <i class="iconfont icon-xia" :style="{color:reverseColor}"></i> -->
                <i class="iconfont icon-xia"></i>
            </button>
        </div>
        <div class="input-picker">
            <!-- https://github.com/one-view/one-colorpicker -->
            <button @click="close()">
                <i class="iconfont icon-guanbi"></i>
            </button>
            <color-panel v-model="color" v-if="show"></color-panel>
            <slot></slot>
        </div>
    </el-popover>
</template>

<script>
import { ColorPicker, ColorPanel } from "one-colorpicker";

export default {
    props: {
        value: { type: [String, Object], required: true },
        name: { type: String, required: false },
    },
    components: { ColorPicker, ColorPanel },
    data () {
        return {
            show: false,
            // color: '#59c7f9',
        };
    },
    computed: {
        color: {
            get () {
                return this.value;
            },
            set (value) {
                // 去掉透明度
                let color = this.getColorHex(value);

                if (color == "#ffffff00") {
                    // 为空
                    color = "";
                } else {
                    color.substr(0, 7);
                }

                if (this.value != color) {
                    this.$emit("input", value);
                }
            },
        },
        reverseColor () {
            var color = this.getColorHex(this.color || "#fff");
            var oldColor = "0x" + color.replace(/#/g, "");
            var str = "000000" + (0xffffff - oldColor).toString(16);
            var reverse = str.substring(str.length - 6, str.length);
            return "#" + reverse;
        },
    },
    methods: {
        getColorHex (color) {
            //十六进制颜色值的正则表达式
            var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
            // 如果是rgb颜色表示
            if (/^(rgb|RGB)?/.test(color)) {
                var aColor = color
                    .replace(/(?:\(|\)|rgb|RGB)*/g, "")
                    .split(",");
                var strHex = "#";
                for (var i = 0; i < aColor.length; i++) {
                    var str = aColor[i] || "";
                    var hex = parseInt(str.replace(/^\D*/, "")).toString(16);
                    if (hex.length < 2) {
                        hex = "0" + hex;
                    }
                    strHex += hex;
                }
                if (strHex.length !== 7 && strHex.length !== 9) {
                    strHex = color;
                }
                return strHex;
            } else if (reg.test(color)) {
                var aNum = color.replace(/#/, "").split("");
                if (aNum.length === 6) {
                    return color;
                } else if (aNum.length === 3) {
                    var numHex = "#";
                    for (var i = 0; i < aNum.length; i += 1) {
                        numHex += aNum[i] + aNum[i];
                    }
                    return numHex;
                }
            }
        },
        close () {
            this.show = false;
        },
    },
};
</script>
<style lang="scss" scoped>
.input-color {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    span {
        height: 14px;
        font-size: 12px;

        color: #666;
        line-height: 14px;
        text-align: left;
        margin-bottom: 4px;
    }

    button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #e6e6e6;
        box-sizing: border-box;
        padding: 0;
        position: relative;

        &:hover {
            border-color: #c7c7c7;
        }

        &::before {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            left: 50%;
            top: 50%;
            margin-left: -10px;
            margin-top: -10px;
            background-image: url();
            background-size: 10px 10px;
        }

        em {
            position: relative;
            width: 20px;
            height: 20px;
            border-radius: 2px;
            border: 1px solid rgba(0, 0, 0, 0.06);
        }

        i {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 12px;
            height: 12px;
            text-align: center;
            line-height: 12px;
            font-size: 12px;
            color: #fff;
            text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
            // opacity: 0.8;
            // text-shadow: -.025em -.025em 0 #fff, .025em -.025em 0 #fff, -.025em .025em 0 #fff, .025em .025em 0 #fff;
            // text-shadow: 0 0 2px rgba(255,255,255,0.5);
        }

        &:hover i {
            // color: #ea4c89;
        }
    }
}

.input-picker {
    width: 256px;
    position: relative;

    &>button {
        display: block;
        position: relative;
        margin-left: auto;
        width: 14px;
        height: 16px;
        top: -5px;
        padding: 0;
        border: none;
    }

    &::v-deep .one-colorpanel {
        box-shadow: none;
        overflow: visible;

        .one-color-control {
            padding: 15px 0;
        }

        .one-color-value {
            display: flex;
            padding: 0 0 5px;
        }

        .one-color-stash {
            display: flex;
            padding: 5px 0;

            .one-color-toggle {
                display: none;
            }
        }

        .one-color-stash-wrap {
            margin: 0 -4px;
            flex: 1;

            ul {
                display: flex;
                flex-wrap: wrap;
                // justify-content: space-between;
            }
        }

        .one-opacity {
            display: none;
        }

        .one-type-ul {
            margin: 0 !important;

            &.one-type-hex {
                display: block !important;
            }

            &.one-type-rgb {
                display: none !important;
            }

            p {
                display: none;
            }
        }

        .one-color-toggle {
            display: none;
        }

        .one-type-ul {
            flex: 1;
            margin-right: 10px;

            li {
                display: flex;
                flex-direction: row-reverse;
                flex: 1;

                input {
                    flex: 1;
                }

                p {
                    margin-right: 5px;
                }

                &+li {
                    margin-left: 10px;
                }
            }
        }

        &+.input-slider {
            margin-top: 10px;
        }
    }
}
</style>
